<template>
    <div>
        <el-alert type="success"
                  title="公共块样式：panel、block"
                  :closable="false">
            <p>- 公共样式中，为相邻的块添加了边距，效果与添加 "margin-l" 或 "margin-t" 相同。</p>
        </el-alert>

        <el-alert class="margin-t"
                  type="warning"
                  title="block"
                  :closable="false">
            <p>- 只在“需要将多个 panel 作为整体”布局时，才使用 block 包围它们。</p>
            <p>- block 可以与 panel 同级。</p>
            <p>- block 的使用示例在菜单分组 “LAYOUT” 中。</p>
        </el-alert>

        <el-divider content-position="left">显示标题</el-divider>
        <div class="panel">
            <div class="panel-head">
                <div class="panel-head-l">标题</div>
            </div>
            <div class="panel-body">
                <el-alert type="info"
                          title="panel 是项目中的主要内容块"
                          :closable="false">
                    <p>公共样式中，为 panel 统一定义了背景、边框、标题等样式。</p>
                </el-alert>
            </div>
        </div>

        <el-divider content-position="left">标题图标</el-divider>
        <div class="panel">
            <div class="panel-head">
                <div class="panel-head-l"><span class="panel-icon _default"></span>标题2</div>
            </div>
            <div class="panel-body">
                <el-alert type="info"
                          :closable="false">
                    <p>标题图标：在 panel-head-l 中添加 panel-icon。</p>
                </el-alert>
            </div>
        </div>

        <el-divider content-position="left">不包含标题</el-divider>
        <div class="panel _body">
            <el-alert type="info"
                      :closable="false">
                <p>不包含标题的块样式："panel _body"，内容直接放在 panel 中，不需要嵌套 panel-body。</p>
            </el-alert>
        </div>

        <el-divider content-position="left">高度自适应外层容器</el-divider>
        <div style="height:120px;">
            <!-- 此处的行内高度仅模拟 panel 需要适应外层容器高度 -->
            <div class="panel _body _stretch">
                <el-alert type="info"
                          :closable="false">
                    <p>高度自适应外层容器"panel _stretch"。</p>
                </el-alert>
                <p>(模拟溢出)</p>
                <p>(模拟溢出)</p>
                <p>(模拟溢出)</p>
                <p>(模拟溢出)</p>
                <p>(模拟溢出)</p>
                <p>(模拟溢出)</p>
            </div>
        </div>
    </div>
</template>
